<template>
  <div>
    <h1>{{ msg }}</h1>
    <table>
      <tr>
        <th>id</th>
        <th>姓名</th>
        <th>年龄</th>
        <th>操作</th>
      </tr>
      <tr v-for="(user,index) in userList" :key="user.id">
        <td>{{ user.id }}</td>
        <td>{{ user.name }}</td>
        <td>{{ user.age }}</td>
        <td>
          <a href="" @click.prevent="delete2(user.id)">删除</a>
          <a href="" @click.prevent="detail(user)">修改</a>
        </td>
      </tr>
    </table>

    <form>
      <div v-show="user.id">
      </div>
      id:<input type="text" v-model="user.id"><br>
      姓名：<input type="text" placeholder="请输入与姓名" v-model="user.name"><br>
      年龄：<input type="text" v-model="user.age"><br>
      <button @click="save">提交</button>
      <button @click="update">修改</button>
    </form>

  </div>
</template>

<script>

import axios from 'axios';
import http from "../../util/request";

let url = 'http://localhost:8800/user'

export default {
  name: 'UserList',
  data() {
    return {
      msg: '用户列表',
      userList: [],
      user: {}
    }
  },
  methods: {
    list() {
      // this.userList = [{id:1,name:'hhl',age:23}]
      // axios.get(url + "/userList").then(resp => {
      //   console.log(resp.data)
      //   this.userList = resp.data;
      // })

      http.get('/user/userList').then(resp => {
          console.log(resp.data)
          this.userList = resp.data;
        })


    },
    save() {
      console.log('保存');
      console.log(url)
      axios.post(url, this.user).then(resp => {
        console.log(resp.data)
        this.list();
      }).catch(err => {
        console.log(err)
      })
    },
    detail(user) {
      this.user = user;
    },
    update() {
      axios.put(url,this.user).then(resp => {
        console.log('修改')
        this.list();
      })
    },
    delete2(id) {
      axios.delete(url + '/' + id).then(resp => {
        console.log('删除')
        this.list();
      })
    }
  },
  created() {
    this.list();

  }
}

</script>

<style scoped>


</style>
